<template>
  <div>
    <pannel title="店铺管理">
      <el-form :model="formData" label-width="120px">
        <el-form-item label="店铺名称">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="店铺公告">
          <el-input
            :rows="5"
            type="textarea"
            v-model="formData.bulletin"
          ></el-input>
        </el-form-item>
        <el-form-item label="店铺头像">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:5000/shop/upload"
            :on-success="uploadAvatar"
            :show-file-list="false"
          >
            <img
              v-if="formData.avatar"
              :src="baseUrl + formData.avatar"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!-- 多图 -->
        <el-form-item label="店铺图片">
          <div class="container">
            <div
              class="img-box"
              v-for="(item, index) in formData.pics"
              :key="index"
            >
              <img :src="baseUrl + item" alt="" />
              <i class="el-icon-close" @click="delItem(index)"></i>
            </div>
            <el-upload
              class="avatar-uploader"
              action="http://localhost:5000/shop/upload"
              :on-success="uploadMorePics"
              :show-file-list="false"
            >
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>

        <el-form-item label="配送费">
          <el-input v-model="formData.deliveryPrice"></el-input>
        </el-form-item>

        <el-form-item label="配送时间">
          <el-input v-model="formData.deliveryTime"></el-input>
        </el-form-item>
        <el-form-item label="配送描述">
          <el-input v-model="formData.description"></el-input>
        </el-form-item>
        <el-form-item label="评分">
          <el-input v-model="formData.score"></el-input>
        </el-form-item>
        <el-form-item label="销量">
          <el-input v-model="formData.sellCount"></el-input>
        </el-form-item>
        <el-form-item label="活动">
          <el-checkbox-group v-model="activeList">
            <el-checkbox label="在线支付满28减5"></el-checkbox>
            <el-checkbox label="单人精彩套餐"></el-checkbox>
            <el-checkbox label="VC无限橙果汁全场8折"></el-checkbox>
            <el-checkbox label="特价饮品8折抢购"></el-checkbox>
            <el-checkbox label="单人特色套餐"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="营业时间">
          <el-time-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            is-range
            v-model="formData.date"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item label="起送价格">
          <el-input v-model="formData.minPrice"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveBtn"> 保存信息</el-button>
        </el-form-item>
      </el-form>
    </pannel>
  </div>
</template>

<script>
import Pannel from "@/components/Pannel.vue";
import { shopInfo, shopEdit } from "@/api/shop";
import { getFileName } from "@/utils/utils";
export default {
  data() {
    return {
      formData: {},
      baseUrl: "http://127.0.0.1:5000",
      activeList: [],
    };
  },
  components: {
    Pannel,
  },
  methods: {
    //删除图片
    delItem(index) {
      console.log(index);
      this.formData.pics.splice(index, 1);
    },
    //上传多图的回调
    //拿到上传的新图片的地址 ---给 formData.pics数组 添加一个元素即可
    uploadMorePics(res) {
      this.formData.pics.push(res.imgUrl);
    },

    //上传头像的回调
    uploadAvatar(res) {
      console.log(res);
      this.formData.avatar = res.imgUrl;
    },

    async getShopInfo() {
      let res = await shopInfo();
      console.log(res);
      this.formData = { ...res.data };
      this.activeList = [...this.formData.supports];
      console.log(this.formData);
    },
    //保存信息
    async saveBtn() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      this.formData.avatar = getFileName(this.formData.avatar);
      this.formData.pics = this.formData.pics.map((item) => getFileName(item));

      this.formData.supports = JSON.stringify(this.activeList);
      this.formData.pics = JSON.stringify(this.formData.pics);
      this.formData.date = JSON.stringify(this.formData.date);

      console.log(this.formData);
      let res = await shopEdit(this.formData);
      loading.close();

      //刷新页面
      this.$router.go(0);
        // this.getShopInfo()
      //   console.log(res);
    },
  },
  mounted() {
    this.getShopInfo();
  },
};
</script>

<style lang="less" scoped>
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  .img-box {
    margin: 10px 10px;
    position: relative;
    img {
      width: 140px;
      height: 140px;
    }
    i {
      position: absolute;
      right: -5px;
      top: -5px;
      font-size: 24px;
      cursor: pointer;
      color: #f44;
      opacity: 0;
      transition: all 0.5s;
    }
  }
  .img-box:hover i {
    opacity: 1;
  }
}
</style>